import React from 'react';
import { withRouter } from 'react-router-dom';
import { getCount } from '../../api/utils';
import {
    ListWrapper,
    ListItem,
    List,
} from './style';
import LazyLoad from 'react-lazyload';

function RecommendList(props) {
    const enterDetail = (id) => {
        props.history.push(`/recommend/${id}`);
    };

    return (
        <ListWrapper>
            <h1 className="title">推荐歌单</h1>
            <List>
                {
                    props.recommendList.map(item => {
                        return (
                            // 加入事件绑定逻辑
                            <ListItem 
                                key={item.id}
                                onClick={() => enterDetail(item.id)}
                            >
                                <div className='img_wrapper'>
                                    <div className='decorate'></div>
                                    {/* 加此参数可以减小请求的图片资源大小 */}
                                    {/* 在img标签外部包裹一层Lazyload */}
                                    <LazyLoad>
                                        <img src={item.picUrl + '?param=300*300'} width='100%' height='100%' alt='音乐'></img>
                                    </LazyLoad>
                                    <div className='play_count'>
                                        <i className='iconfont paly'>&#xe885;</i>
                                        <span className='count'>{ getCount(item.playCount) }</span>
                                    </div>
                                </div>
                                <div className='desc'>{ item.name }</div>
                            </ListItem>
                        )
                    })
                }
            </List>
        </ListWrapper>
    )
};


export default React.memo(withRouter(RecommendList));
